<template>
  <div>
    <el-row>
      <el-col :span="24">
        <dy-panel>
          <dy-panel-header title="字典管理"></dy-panel-header>
          <el-row>
            <el-col :span="3">
              <dy-panel-body :border="0">
                <el-form>
                  <el-input placeholder="请输入类别名称" v-model="treeFilter"></el-input>
                </el-form>
                <el-row style="margin-top: 10px">
                  <el-tree
                    :data="treeList"
                    :default-expand-all="true"
                    :expand-on-click-node="false"
                    :filter-node-method="onTreeFilterNodeEvent"
                    :props="treeProps"
                    @node-click="onSelectTreeEvent"
                    class="filter-tree"
                    highlight-current
                    ref="tree"
                  ></el-tree>
                </el-row>
              </dy-panel-body>
            </el-col>
            <el-col :span="21">
              <dy-panel-body>
                <el-row>
                  <el-form :inline="true" class="demo-form-inline">

                    <el-form-item label="关键字">
                      <el-input
                        @change="doSearchList"
                        clearable
                        placeholder="请输入字典编码或名称"
                        v-model="queryParam.searchKey"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button @click="doSearchList" type="primary">查询</el-button>
                    </el-form-item>
                  </el-form>
                </el-row>
                <el-row>
                  <el-button :disabled="!operateBtn.addBtn" @click="onAddBtnEvent" type="primary">新增</el-button>
                  <el-button
                    :disabled="!operateBtn.editBtn"
                    @click="onEditBtnEvent"
                    type="success"
                  >修改
                  </el-button>
                  <el-button :disabled="!operateBtn.delBtn" @click="onDelBtnEvent" type="danger">删除</el-button>
                  <!--<el-button :disabled="!operateBtn.importBtn" type="default">导入</el-button>-->
                  <!--<el-button :disabled="!operateBtn.exportBtn" type="default">导出</el-button>-->
                </el-row>
              </dy-panel-body>
              <dy-panel-body v-loading="loading">
                <el-table
                  :data="tableList"
                  @selection-change="onSelectRowEvent"
                  @sort-change="onSortTableEvent"
                  border
                  row-key="id"
                  style="width: 100%;text-align: center"
                >
                  <el-table-column
                    align="center"
                    label="序号"
                    prop="date"
                    type="selection"
                    width="30"
                  ></el-table-column>
                  <el-table-column align="center" label="字典名称" prop="dictName" width="120">

                  </el-table-column>
                  <el-table-column align="center" label="字典编码" prop="dictCode" width="120">

                  </el-table-column>
                  <el-table-column align="center" label="字典值" prop="dictValue" width="120">

                  </el-table-column>

                  <el-table-column align="center" label="默认" prop="isDefault" width="120">

                  </el-table-column>

                  <el-table-column align="center" label="排序" prop="orderIndex" width="120">

                  </el-table-column>
                  <el-table-column align="center" label="状态" prop="disabled" width="120">
                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.disabled==1?'danger':''"
                        effect="dark"
                      >{{scope.row.disabled==1?'禁用':'正常'}}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="创建人" prop="createUserAccount">

                  </el-table-column>
                  <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
                  <el-table-column align="center" label="更新时间" prop="updateTime"></el-table-column>
                  <el-table-column label="操作" prop="id" width="120">
                    <template slot-scope="scope">
                      <el-link
                        @click="onEditRowEvent(false,scope.row)"
                        style="margin-right: 10px"
                        type="primary"
                      >编辑
                      </el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                  <dy-pagination
                    :current-page.sync="queryParam.currentPage"
                    :page-size.sync="queryParam.pageSize"
                    :total="tableTotal"
                    @click="doSearchList"
                  ></dy-pagination>
                </div>
              </dy-panel-body>
            </el-col>
          </el-row>
        </dy-panel>
      </el-col>
    </el-row>
    <el-row>
      <dy-modal
        :form-key="editModal.formKey"
        :read-only="editModal.readOnly"
        :title="editModal.title"
        :visible.sync="editModal.visible"
        v-if="editModal.visible"
        v-on:close="onRefresh"
        top="5vh"
        width="30%"
      >
        <sys-tb-dict-update
          :data="editModal.data"
          :form-key="editModal.formKey"
          :groupList="groupList"
        ></sys-tb-dict-update>
      </dy-modal>


    </el-row>
  </div>
</template>
<script>
  import {DyPanel, DyPanelHeader} from '@/view/panel'
  import DyPanelBody from '@/view/panel/DyPanelBody'
  import sysTbDictApi from '@/apis/sysApp/sysTbDictApi.js'
  import sysTbDictGroupApi from '@/apis/sysApp/sysTbDictGroupApi.js'
  import DyPagination from '@/components/pagination/DyPagination.vue'
  import CodeEditor from '@/components/codeEditor/CodeEditor'
  import SysTbDictUpdate from './SysTbDictUpdate'

  export default {
    name: 'SysTbDictList',
    components: {
      SysTbDictUpdate,
      CodeEditor,
      DyPanelBody,
      DyPanel,
      DyPanelHeader,
      DyPagination
    },
    data () {
      return {
        /**
         * 编辑弹出框
         */
        editModal: {
          formKey: 'SysTbDictUpdateKey',
          readOnly: false,
          data: {},
          visible: false
        },
        outModal: {
          formKey: 'SysTbDictUpdateKey',
          readOnly: false,
          data: {},
          visible: false
        },
        inputCaseModal: {
          inputCaseDialogVisible: false,
          inputCaseDialogText: '',
        },
        loading: true,
        /**
         * 查询参数
         */
        queryParam: {
          currentPage: 1,
          pageSize: 10
        },
        /**
         * 上方操作按钮
         */
        operateBtn: {
          addBtn: true,
          editBtn: false,
          delBtn: false,
          importBtn: true,
          exportBtn: true
        },
        /**
         * 已选中的行
         */
        selectRows: [],
        roleList: [],
        treeFilter: '',
        treeList: [],
        groupList: [],
        treeProps: {
          children: 'children',
          label: 'dictGroupName'
        },
        tableTotal: 0,
        tableList: []
      }
    },
    created () {
      /**
       * 执行列表查询
       * */
      this.doSearchList()
      /**
       * 查询所有字典
       */
      sysTbDictGroupApi.selectList({}).then(msg => {
        let array = [{
          dictGroupName: '所有字典',
          children: msg.rows,
          dictGroupCode: '',
        }]
        this.groupList = msg.rows
        this.treeList = array
      })
    },

    methods: {
      /**
       * 编辑按钮事件处理
       */
      onEditBtnEvent () {
        if (this.selectRows.length != 1) {
          return
        }
        this.editModal.title = '产品编辑'
        this.editModal.readOnly = false
        this.editModal.data = this.selectRows[0]
        this.editModal.visible = true
      },
      /**
       * 编辑按钮事件处理
       */
      onOutRowEvent (readOnly, data) {
        this.outModal.title = `${data.apiCode}输出清单`
        this.outModal.readOnly = false
        this.outModal.data = this.cloneDeep(data)
        this.outModal.visible = true
      },
      /**
       * 新增按钮事件处理
       */
      onAddBtnEvent () {
        this.editModal.readOnly = false
        this.editModal.data = null
        this.editModal.visible = true
      },
      /**
       * 编辑某行事件处理
       * @param readOnly
       * @param data
       */
      onEditRowEvent (readOnly, data) {
        this.editModal.readOnly = false
        this.editModal.data = this.cloneDeep(data)
        this.editModal.visible = true
      },
      /**
       * 删除按钮
       * */
      onDelBtnEvent () {
        this.$confirm('您确认要删除选中的记录么？', '删除警告', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
          .then(() => {
            let ids = []
            for (let row of this.selectRows) {
              ids.push(row.id)
            }
            this.doDeleteList(ids)
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
      },
      /**
       * 部门筛选事件处理
       * @param value
       * @param data
       * @returns {boolean}
       */
      onTreeFilterNodeEvent (value, data) {
        if (!value) return true
        return data.dictGroupName.indexOf(value) !== -1
      },
      /**
       * 部门选择事件处理
       * @param data
       * @param node
       * @param array
       */
      onSelectTreeEvent (data, node, array) {
        if (data.root) {
          this.queryParam.fkDictGroupCode = ''
        } else {
          this.queryParam.fkDictGroupCode = data.dictGroupCode
        }
        this.doSearchList()
      },
      /**
       * 选中某行事件处理
       * @param selection
       */
      onSelectRowEvent (selection) {
        this.selectRows = selection
        if (this.selectRows.length != 1) {
          this.operateBtn.editBtn = false
        } else {
          this.operateBtn.editBtn = true
        }
        if (this.selectRows.length >= 1) {
          this.operateBtn.delBtn = true
        } else {
          this.operateBtn.delBtn = false
        }
      },

      /**
       * 排序事件处理
       * @param col
       */
      onSortTableEvent (col) {
        this.queryParam.fixed = col.prop
        this.queryParam.sort = col.order == 'descending' ? 'desc' : 'asc'
        this.doSearchList()
      },
      onEditInputCaseEvent (row) {
        this.inputCaseModal.inputCaseDialogVisible = true
        this.inputCaseModal.inputCaseDialogText = JSON.stringify(row.inputCase)
        this.inputCaseModal.outputCaseDialogText = JSON.stringify(row.outputCase)
        this.inputCaseModal.oldOutputCaseDialogText = JSON.stringify(row.oldOutputCase)

      },
      onRefresh (isRefresh) {
        if (isRefresh) {
          this.doSearchList()
        }
      },
      /**
       * 查询列表业务处理
       */
      doSearchList () {
        this.loading = true
        sysTbDictApi.selectList(this.queryParam).then(msg => {
          setTimeout(() => {
            this.tableList = msg.rows
            this.tableTotal = msg.total
            this.queryParam.currentPage = msg.currentPage
            this.loading = false
          }, 200)
        }).catch(msg => {
          console.log(msg)
        })
      },
      doDeleteList (ids) {
        let data = {ids: ids}
        sysTbDictApi.deleteListService(data).then(msg => {
          this.onRefresh(true)
        })
      }
    },
    computed: {},
    watch: {
      treeFilter (val) {
        this.$refs.tree.filter(val)
      }
    }
  }
</script>
